<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>第97款插件：jquery.ipicture.js在地图上做标记并可以用图文及链接展示</title>
		<link rel="stylesheet" type="text/css" href="http://www.ijquery.cn/css/css.css" media="all" />
		<!-- start -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/iPicture.css"/>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.ipicture.js"></script>
		<!-- end -->
	</head>
	
	<body>
		<div id="header">
			<h1>第97款插件：jquery.ipicture.js在地图上做标记并可以用图文及链接展示</h1>
		</div>
		
		<div class="" style="width:800px;height:400px;text-align:center;margin:60px auto;">
		
				
				
				
					<!-- start -->
					<div id="iPicture" data-interaction="hover">
						<div class="ip_slide">
							<!-- 本身的图片 -->
							<img class="ip_tooltipImg" src="images/mypic.jpg" />
							<!-- tips 1 -->
							<div class="ip_tooltip ip_img32" style="top: 330px; left: 418px;" data-tooltipbg="bgblack" data-round="roundBgWInner" data-animationtype="btt-slide">
								<p><b>一艘潜艇</b><br/>链接到：<a href="http://www.baidu.com">百度</a></p>
							</div>
							<!-- tips 2 -->
							<div class="ip_tooltip ip_img32" style="top: 60px; left: 558px;" data-button="moreblue" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="rtl-slide">
								<p><img src="images/s1.jpg" alt="" ></p>
							</div>
							<!-- tips 3 -->
							<div class="ip_tooltip ip_img32" style="top: 260px; left: 228px;" data-button="moreblue" data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="ltr-slide">
								<p><b></b><br/>有一座桥，全长688米。</p>
							</div>
						</div>
					</div>
					<script type="text/javascript">
						$( "#iPicture" ).iPicture();
					</script>
					<!-- end -->
					
				
			
		</div>	
	</body>
</html>